<template>
  <u-popup
    v-model="show"
    mode="bottom"
    :closeable="true"
    width="80%"
    border-radius="14"
  >
    <view class="font-model-wraper">
      <view class="font-model-content">
        <view class="modal-title">形状设置</view>
        <view class="content">
          <view class="rotate">
            <text>旋转角度：</text>
            <input
              maxlength="3"
              @input="changeVal($event, 'rotate')"
              v-model="shape.rotate"
              type="text"
            />
          </view>
          <view class="rotate">
            <text>图层层级：</text>
            <input
              maxlength="3"
              @input="changeVal($event, 'zIndex')"
              v-model="shape.zIndex"
              type="text"
            />
          </view>
          <view class="rotate">
            <text>背景色：</text>
            <view
              class="color item"
              @click="change('backgroundColor')"
              :style="{ background: shape.backgroundColor }"
            >
            </view>
          </view>
          <view class="rotate">
            <text>边框颜色：</text>
            <view
              class="color item"
              @click="change('borderColor')"
              :style="{ background: shape.borderColor }"
            ></view>
          </view>
          <view class="rotate">
            <text>边框线宽大小：</text>
            <input
              maxlength="3"
              @input="changeVal($event, 'borderWidth')"
              v-model="shape.borderWidth"
              type="text"
            />
          </view>
          <view class="rotate">
            <text>边框圆角大小：</text>
            <input
              maxlength="3"
              @input="changeVal($event, 'radius')"
              v-model="shape.radius"
              type="text"
            />
          </view>
          <view class="rotate">
            <text>边框宽：</text>
            <input
              maxlength="3"
              @input="changeVal($event, 'width')"
              v-model="shape.width"
              type="text"
            />
          </view>
          <view class="rotate">
            <text>边框高：</text>
            <input
              maxlength="3"
              @input="changeVal($event, 'height')"
              v-model="shape.height"
              type="text"
            />
          </view>
        </view>
        <view class="btn-wrap">
          <view class="btn cancel" @click="handleCancel">取消</view>
          <view class="btn confirm" @click="throttle">确认</view>
        </view>
        <view></view>
      </view>
    </view>
    <!-- <s-color ref="color" :color="color" @confirm="handleColorConfirm" /> -->
  </u-popup>
</template>

<script>
import sColor from "../s-color/s-color.vue";
// import uPopup from '../u-popup/u-popup.vue';
import { formatTool } from "../../utils/tool.js";
import throttle from "../../utils/throttle.js";
export default {
  name: "sShape",
  props: {
    // 是否显示弹窗
    isShow: {
      type: Boolean,
      default: false,
    },
    shapeData: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  components: { sColor },
  watch: {
    shapeData: {
      handler(o) {
        this.shape = Object.assign(
          {
            borderStyle: "solid",
            borderWidth: 1,
            borderColor: "#fff",
            backgroundColor: "#fff",
            radius: 2,
            width: 50,
            height: 50,
            rotate: 0,
            boxSizing: "content-box",
          },
          o
        );
      },
      deep: true,
      immediate: true,
    },
  },
  data() {
    return {
      show: false,
      currentType: "",
      color: "",
      shape: {
        borderStyle: "solid",
        borderwidth: 1,
        borderColor: "#fff",
        backgroundColor: "#fff",
        radius: 2,
        width: 50,
        height: 50,
        rotate: 0,
        boxSizing: "content-box",
      },
    };
  },
  methods: {
    throttle() {
      throttle(this.handleConfirm, 1500);
    },
    changeVal(e, key) {
      let val = e.target.value;
      if (!val) return;
      if (!formatTool(val, 2)) {
        this.$nextTick(() => {
          if (key == "rotate") {
            his.shape[key] = 0;
          } else {
            this.shape[key] = 1;
          }
        });
      }
    },
    change(type) {
      this.currentType = type;
      this.color = this.shape[type];
      console.log("<<<<yyds>>>>>", this.color);
      this.$refs.color.show = true;
    },
    handleCancel() {
      this.show = false;
      this.shape = Object.assign(
        {
          borderStyle: "solid",
          borderWidth: 1,
          borderColor: "#fff",
          backgroundColor: "#fff",
          radius: 2,
          width: 50,
          height: 50,
          rotate: 0,
          boxSizing: "content-box",
        },
        this.shapeData
      );
      this.$emit("cancel", "cancel");
    },
    handleConfirm() {
      this.show = false;
      this.$emit("confirm", this.shape);
    },
    handleColorConfirm(data) {
      this.shape[this.currentType] = data.color;
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../../scss/common.scss";

.font-model-wraper {
  width: 100%;
  height: 100%;
  background-color: #fff;
  position: absolute;
  z-index: 1000;
  inset: 0;

  .font-model-content {
    position: relative;

    .modal-title {
      height: 90rpx;
      line-height: 90rpx;
      width: 100%;
      text-align: center;
      font-size: 32rpx;
      color: $uni-text-color;
      background: $uni-bg-color-grey;
    }

    .content {
      background: #fff;

      .setting-box {
        padding: 10rpx 20rpx;
        border-top: 1rpx solid $uni-border-color;
        border-bottom: 1rpx solid $uni-border-color;
        overflow: hidden;

        .item {
          width: 40rpx;
          height: 40rpx;
          float: left;

          &:not(:last-child) {
            margin-right: 40rpx;
          }
        }
      }

      .textarea {
        margin: 20rpx auto 0;
        padding: 20rpx;
        border: 1px solid #ddd;
        border-radius: 10rpx;
        min-height: 200rpx;
      }
    }

    .btn-wrap {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;

      .btn {
        width: 50%;
        height: 90rpx;
        text-align: center;
        line-height: 90rpx;
        font-size: 32rpx;
        float: left;
        border-top: 1rpx solid $uni-border-color;
        color: #5999ff;
      }

      .btn.cancel {
        width: calc(50% - 1rpx);
        border-right: 1rpx solid $uni-border-color;
        color: #666;
      }
    }
  }
}

.content {
  .rotate {
    padding: 20rpx;
    font-size: 28rpx;
    display: flex;
    font-weight: 700;
    justify-content: flex-start;
    align-items: center;
    border-bottom: 1px solid #f7f7f7;

    text {
      width: 240rpx;
      margin-right: 15rpx;
    }

    .color {
      border: 1px solid #ddd;
      border-radius: 8rpx;
      width: 50rpx;
      height: 50rpx;
    }
  }
}
</style>
